/**
 * 学习目标：React中的事件处理
 */
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  // 1. 语法：使用on+事件名：驼峰式写法

  // 2. onClick = {函数} ， 不能是函数调用
  // 注意：
  //    1. onCLick = {} 必须有{}
  //    2. 绑定的一定要是函数，不能是调用
  //    3. ❌onClick = "this.handleClick"
  render() {
    return (
      <div>
        <button
          // 👎 不推荐：使用function关键字，太臃肿
          // onClick={function () {
          //   alert('Hello React');
          // }}

          // 2.1 少量代码
          onClick={() => alert('hello React')}
          // 2.2 多行代码
          // onClick={this.handleClick}
        >
          点我
        </button>
      </div>
    );
  }

  handleClick() {
    console.log('Hello React  ----->  ');
    console.log('Hello React  ----->  ');
    console.log('Hello React  ----->  ');
    console.log('Hello React  ----->  ');
    console.log('Hello React  ----->  ');
    console.log('Hello React  ----->  ');
    alert('Hello React');
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
